<template>
    <div id="swiperTop">
        <van-swipe lazy-render :autoplay="3000" :touchable="true">
            <van-swipe-item v-for="image in state.images" :key="image">
                <!-- {{image}} -->
                <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import service from "../../request/index";
import { onMounted, reactive } from "vue";
export default {
    name: "Swiper",
    setup() {
        const state = reactive({
            images: [],
        });

        const methods = {
            //获取 banner
            async fetch() {
                const res = await service.get("banner?type=2");
                // console.log(res);
                state.images = res.data.banners;
            },
        };

        onMounted(() => {
            methods.fetch();
        });

        return { state };
    },
};
</script>

<style lang="less">
//需要在上面自己添加一个id
#swiperTop {
    .van-swipe {
        width: 100%;
        height: 3rem;
        .van-swipe-item {
            padding: 0 0.2rem;
            img {
                width: 100%;
                height: 100%;
                border-radius: 0.2rem;
            }
        }
        .van-swipe__indicator--active {
            background-color: rgb(219, 130, 130);
        }
    }
}
</style>
